<template>
    <wd-floating-panel :contentDraggable="false" v-model:height="height" :anchors="anchors"
        @heightChange="handleHeightChange">
        <view class="inner-content">
            <view class="cate-box" ref="cateBoxRef">
                <view class="cate-one">
                    <view class="cate-item" :class="{ 'active': item.isSelect }" @click="changeCate(item, index)"
                        v-for="(item, index) in cateList" :key="index">
                        {{ item.name }}
                    </view>
                </view>
                <view class="cate-two">
                    <uni-data-select v-model="value" @change="changeSelect" :localdata="cateTwoList"
                        :clear="false"></uni-data-select>
                </view>
            </view>
            <view class="list-box">
                <view v-if="!dataList.length" class="empty">附近暂无换电站点</view>
                <scroll-view v-else :style="{ height: scrollViewHeight + 'px' }" scroll-y="true" class="scroll-Y"
                    @scrolltolower="scrolltolower" :lower-threshold="100">
                    <view class="list-item" v-for="(item, index) in dataList" :key="index"
                        @click="handleNavToDetail(item)">
                        <view class="list-top">
                            <view class="list-top-left">
                                <view class="title">
                                    {{ item.stationName }}
                                </view>
                                <view class="tip">
                                    <text v-if="item.isToilet == 1">卫生间</text>
                                    <text v-if="item.isMeal == 1">简餐</text>
                                    <text v-if="item.isStore == 1">便利店</text>
                                    <text>{{ item.storeHours }}</text>
                                </view>
                            </view>
                            <view class="list-top-right" @click.stop="goToMapFn(item)">
                                <view class="d-icon">
                                    <image src="/static/icon/dh.png" mode="scaleToFill" />
                                </view>
                                <view class="km">{{ item.distance }}km</view>
                            </view>
                        </view>
                        <view class="more">
                            <view class="more-left">
                                ¥{{ item.price.toFixed(2) }}/度
                            </view>
                            <view class="more-right">
                                <view class="more-icon">
                                    <image src="/static/icon/list-d.png" mode="scaleToFill" />
                                </view>
                                <view class="available">可用 {{ item.usableNum || 0 }} / {{ item.countNum || 0 }}</view>
                            </view>
                        </view>
                        <view class="welfare" v-if="item.parkType">
                            <view class="welfare-icon">
                                <image src="/static/icon/tc.png" mode="scaleToFill" />
                            </view>
                            <text class="welfare-text">
                                {{ item.parkType }}
                            </text>
                        </view>
                    </view>
                    <view style="height: 90px;" v-if="scrollViewHeight <= 500"></view>
                </scroll-view>
            </view>
        </view>
    </wd-floating-panel>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { goToMap } from '@/utils/tools'
import { debounce } from '@/utils/tools';

const props = defineProps({
    dataList: {
        type: Array,
        default: () => []
    }
})

const emits = defineEmits(['change', 'watchHeight'])

const cateList = ref([
    { name: '停车减免', value: '1', isSelect: false, stoCar: '' },
    { name: '可充电', value: '2', isSelect: false, canCharge: '' },
    { name: '站场空闲', value: '3', isSelect: false, idle: '' }
])

const value = ref("0")
const cateTwoList = ref([
    { value: "0", text: "距离排序" },
    { value: "1", text: "价格排序" },
])

// 获取分类栏高度
const cateBoxRef = ref(null)
const cateBoxHeight = ref(0)

// 跳转地图
const goToMapFn = ({ latitude, longitude, stationName, stationAddr }) => {
    goToMap(latitude, longitude, stationName, stationAddr)
}

// 跳转详情
const handleNavToDetail = (item) => {
    uni.navigateTo({
        url: `/pages/index/indexListDetail?stationNo=${item.stationNo}&latitude=${item.latitude}&longitude=${item.longitude}&usableNum=${item.usableNum}&countNum=${item.countNum}&stationName=${item.stationName}`
    })
}

let current = ref(null)
const listQuery = ref({})
const changeCate = (item, index) => {
    item.isSelect = !item.isSelect;
    let cateQuery = ref({})
    const queryMap = {
        1: 'stoCar',
        2: 'canCharge',
        3: 'idle'
    };
    const queryKey = queryMap[item.value];
    if (queryKey) {
        cateQuery.value = {
            ...cateQuery.value,
            [queryKey]: item.isSelect ? 1 : ''
        };
    }
    listQuery.value = {
        ...listQuery.value,
        ...cateQuery.value
    };
    emits('change', listQuery.value, 'change');
}

const changeSelect = (data) => {
    listQuery.value.sortType = data
    emits('change', listQuery.value, 'change')
    console.log(listQuery.value, 'listQuery.value')
}

let pageNum = ref(1)
const scrolltolower = debounce(() => {
    pageNum.value++
    listQuery.value.pageNum = pageNum.value
    emits('change', listQuery.value, 'scroll')
}, 500)

const height = ref(0)
const windowHeight = ref(0)
const anchors = ref([])

// 计算scroll-view的高度
const scrollViewHeight = computed(() => {
    return height.value - cateBoxHeight.value
})

const handleHeightChange = (data) => {
    emits('watchHeight', data.height)
    height.value = data.height
}

// 获取分类栏实际高度
const getCateBoxHeight = () => {
    nextTick(() => {
        const query = uni.createSelectorQuery().in(cateBoxRef.value)
        query.select('.cate-box').boundingClientRect(data => {
            if (data) {
                cateBoxHeight.value = data.height
            }
        }).exec()
    })
}

onLoad(() => {
    windowHeight.value = uni.getSystemInfoSync().windowHeight
    anchors.value = [270, Math.round(0.5 * windowHeight.value), Math.round(0.7 * windowHeight.value)]
    height.value = anchors.value[1]
    emits('watchHeight', height.value)
})

onMounted(() => {
    getCateBoxHeight()
})
</script>

<style lang="scss" scoped>
.active {
    background-color: #55946d !important;
    color: #fff !important;
    transition: all .3s;
}

.more,
.list-top,
.cate-box,
.cate-one {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scroll-Y {
    padding-bottom: 20rpx;
    padding-top: var(--wot-floating-panel-header-height, 50px);
}

.inner-content {
    .cate-box {
        position: fixed;
        // top: var(--wot-floating-panel-header-height, 28px);
        left: 0;
        right: 0;
        z-index: 100;
        padding: 0 10px 10px 10px;
        background-color: #fff;

        .cate-one {
            .cate-item {
                margin: 0 15rpx;
                text-align: center;
                padding: 15rpx 20rpx;
                background-color: #e2e0e0;
                border-radius: 30rpx;
                font-size: 25rpx;
            }

            .cate-item:first-child {
                margin-left: 0;
            }
        }

        .cate-two {
            width: 230rpx;
        }
    }

    .list-box {
        padding: 0 20rpx 20rpx 20rpx;

        .list-item {
            border: 1rpx solid #d7d7d7;
            margin-bottom: 5px;
            padding: 20rpx;
            border-radius: 10rpx;
        }

        .list-item:last-child {
            margin-bottom: 0;
        }

        .list-top {
            .list-top-left {
                .title {
                    font-size: 30rpx;
                    font-weight: 900;
                    margin-bottom: 10rpx;
                }

                .tip {
                    display: flex;
                    align-items: center;

                    text {
                        margin-right: 10rpx;
                        font-size: 25rpx;
                    }
                }
            }

            .list-top-right {
                display: flex;
                align-items: center;

                .d-icon {
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 10rpx;

                    image {
                        width: 30rpx;
                        height: 30rpx;
                    }
                }

                .km {
                    font-size: 20rpx;
                }
            }
        }

        .more {
            margin-top: 10rpx;

            .more-left {
                font-size: 30rpx;
                font-weight: 700;
                color: #e4ab8a;
            }

            .more-right {
                display: flex;
                align-items: center;

                .more-icon {
                    border: #55946d;
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 10rpx;
                    background-color: #fff;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    image {
                        width: 40rpx;
                        height: 40rpx;
                    }
                }

                .available {
                    font-size: 30rpx;
                    font-weight: 700;
                    color: #55946d;
                }
            }
        }

        .welfare {
            display: flex;
            margin-top: 10rpx;

            .welfare-icon {
                width: 30rpx;
                height: 30rpx;
                margin-right: 10rpx;
                background-color: #fff;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;

                image {
                    width: 30rpx;
                    height: 30rpx;
                }
            }

            .welfare-text {
                font-size: 25rpx;
            }
        }
    }
}

.empty {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #444;
    padding-top: 30%;
}
</style>